<template>
<div class="view-Var05">
	<div>-------------------- Var05 --------------------</div>
	<el-button @click='fnC1'>11</el-button>
	<div>{{objC1.name1}}:{{objC1.name2}}:{{objC1.age}}</div>
	<div>{{refVal1}}</div>
	<div>-------------------- Var05 --------------------</div>
</div>
</template>  
<script>
import { ref, reactive, watchEffect } from 'vue'

export default {
	name: 'Var05',
	setup (props, context) {
		const objC1 = reactive({ name1: "aa1", name2: 'xx2', age: 18 });
		let refVal1 = ref('aaa');

		const fnC1 = () => {
			objC1.name1 = 'bb1';
			objC1.age++;
			console.log('fnC1', 11);
		};
		watchEffect(() => {
			refVal1.value = objC1.name1 + objC1.name2 + objC1.age;
			//return objC1.name1 + objC1.name2 + objC1.age;
		});
		return {
			objC1,
			refVal1,
			fnC1,
		}
	},
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>